<template>
	<view class="box" :style="{ 'gap': set.gap, }">
		<view class="left" :style="{ 'gap': set.gap, 'flex': set.leftList.length == 0 ? 0 : set.leftFlex }">
			<view v-if="set.isLeftorRight != 1" v-for="(item, index) in set.leftList" class="showImg"
				@click="imgClick(item.url)">
				<image :src="item.image" style="width: 100%;" 
				:style="{ 'border-radius': set.radius+'px' }" mode="widthFix">
				</image>
			</view>
			<view v-if="set.isLeftorRight == 1" v-for="(item, index) in set.leftList" class="showImg"
				@click="imgClick(item.url)">
				<image v-if="index < set.leftList.length - 1" :src="item.image" style="width: 100%;"
					:style="{ 'border-radius': set.radius+'px', 'height': set.leftList.length <= 1 ? '100%' : 'auto' }"
					mode="widthFix">
				</image>
				<image v-if="index == set.leftList.length - 1" :src="item.image" style="width: 100%; height: 100%;"
					:style="{ 'border-radius': set.radius+'px', }" mode="widthFix"></image>
			</view>
		</view>
		<view class="right" :style="{ 'gap': set.gap, 'flex': set.rightList.length == 0 ? 0 : set.rightFlex }">
			<view v-if="set.isLeftorRight != 0" v-for="(item, index) in set.rightList" class="showImg"
				@click="imgClick(item.url)">
				<image :src="item.image" style="width: 100%;" :style="{ 'border-radius': set.radius+'px' }" mode="widthFix">
				</image>
			</view>
			<view v-if="set.isLeftorRight == 0" v-for="(item, index) in set.rightList" class="showImg"
				@click="imgClick(item.url)">
				<image v-if="index < set.rightList.length - 1" :src="item.image" style="width: 100%;"
					:style="{ 'border-radius': set.radius+'px', 'height': set.rightList.length <= 1 ? '100%' : 'auto' }"
					mode="widthFix">
				</image>
				<image v-if="index == set.rightList.length - 1" :src="item.image" style="width: 100%; height: 100%;"
					:style="{ 'border-radius': set.radius+'px', }"  mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "diy-img-grid-three",
	data() {
		return {
			
		}
	},
	props: {
		set: {
			type: Object,
			default() {
				return {
					leftList: [],
					rightList: [],
					radius: 8,
					gap: '8px',
					// 左右图片占比
					leftFlex: 2, // 左边宽度
					rightFlex: 1, // 右边宽度
					isLeftorRight: 0, // 0 左边正常铺满，右边最后一张图拉伸占满高度， 1 右边正常铺满，左边最后一张图拉伸占满高度
				}
			}
		}
	},
	methods: {
		imgClick(url) {
			this.navto(url)
		}
	}
}
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch; // 新增：使左右两列高度一致

	.left,
	.right {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		justify-content: space-between; // 修改：使图片均匀分布

		font-size: 0;

		.showImg:last-of-type {
			flex: 1;
		}
	}
}
</style>